<template>
  <div class="app-container" v-loading="loading">
    <div class="action-container">
      <el-date-picker
        v-model="searchTime"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" class="filter-item" @click="search">搜索</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="date"
        label="时间"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="收入总金额(元)"
      >
        <template slot-scope="scope">
          {{(scope.row.cash + scope.row.wechatPay)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="cash"
        label="现金收入(元)"
      >
      </el-table-column>
      <el-table-column
        prop="wechatPay"
        label="微信收入(元)"
      >
      </el-table-column>
      <el-table-column
        prop="tolOrderAmount"
        label="总订单数(今日)"
      >
      </el-table-column>
      <el-table-column
        prop="refundOrderAmount"
        label="退款订单数(今日)"
      >
      </el-table-column>
      <el-table-column
        prop="refundMoney"
        label="退款订单金额(今日)"
      >
      </el-table-column>
    </el-table>
    <pagination
      :total-elements="totalElements"
      :change-callback="handover"
      ref="page"></pagination>

  </div>
</template>

<script>
  import {handover} from '../api/financialreport'
  import pagination from '@/components/pagination/index'

  export default {
    components: {pagination},
    data() {
      return {
        loading: false,
        btnLoading: false,
        multipleSelection: [], // 选中数据-多选
        totalElements: 0, // 数据条数
        queryList: {}, // 搜素数据
        tableData: [], // 表格数据
        formLabelWidth: '120px',
        searchTime: '',
      }
    },
    mounted() {
      this.initTime();
      this.handover()
    },
    methods: {
      initTime() {
        let date = new Date();
        let end = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
        let lw = new Date(date - 1000 * 60 * 60 * 24 * 30);
        let lastY = lw.getFullYear();
        let lastM = lw.getMonth() + 1;
        let lastD = lw.getDate();
        let start = lastY + "-" + (lastM < 10 ? "0" + lastM : lastM) + "-" + (lastD < 10 ? "0" + lastD : lastD);
        this.searchTime = [start, end];
      },
      handover() {
        this.loading = true
        handover(this.searchTime[0], this.searchTime[1], 2).then(response => {
          let data = response.obj
          console.log(data);
          this.tableData = data
          setTimeout(() => {
            this.loading = false
          }, 500)
        }).catch(() => {
          this.loading = false
        })
      },
      search() {
        console.log(this.searchTime);
        this.handover()
      },
      refresh() {
        this.$refs.page.refresh()
      },
    },
  }
</script>

<style scoped>
  body .el-table th.gutter {
    display: table-cell !important;
  }
</style>
